<template>
	<view class="wrapper">
		<uni-nav-bar status-bar="true" left-icon="back" @clickLeft="backHome" @clickRight="showRestaurant" left-text="返回" fixed="true" title="食堂餐品">
			<text class="nav-bar-right" slot="right">{{ restaurantConfig[restaturantId] }}</text>
		</uni-nav-bar>
		<view class="nav-an" :class="isShowRestaurant ? 'show' : ''">
			<view class="nav-choose-restaurant">
				<view
					class="nav-choose-restaurant-item"
					v-for="(item, index) in restaurantConfig"
					@click="chooseRestaurant(index)"
					:class="restaturantId === index ? 'active' : ''"
					:key="index"
				>
					{{ item }}
				</view>
			</view>
		</view>
		<!-- <text>123456</text> -->
		<!-- <view class="wrapper-content" :style="'height:'+wrapperHeight+'px'"> -->
		<swiper indicator-color="rgba(247,107,138,0.75)" indicator-active-color="#f76b8a" indicator-dots="true" autoplay="0" circular="true" interval="1000000" duration="1000">
			<swiper-item v-for="(item, index) in imgList" :key="index">
				<image class="img" :src="item.url" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<view class="content" :style="'height:' + loadingHeight + 'px'">
			<side-list @getWindowMessage="getWindowMessage" :list="this.list" />
			<window-content :windowData="windowData"></window-content>
		</view>
		<!-- </view> -->
	</view>
</template>

<script>
import uniNavBar from '@/components/plugins/uni-nav-bar/uni-nav-bar.vue';
import SideList from '../../components/SideList.vue';
import WindowContent from '../../components/WindowContent.vue';
import { _ajax } from '../../in-xupt-functions.js';
export default {
	data() {
		return {
			list: [],
			imgList: [],
			loadingHeight: 0,
			restaturantId: 3,
			windowData: {},
			isShowRestaurant: false,
			restaurantConfig: ['旭日苑1楼', '旭日苑2楼', '旭日苑3楼', '美食广场', '东升苑1楼', '东升苑2楼', '饮食中心'],
			wrapperHeight: 0,
			isLocal: false
		};
	},
	created() {
		this.getRestaurantList(this.restaturantId);
	},
	onLoad() {
		// this.barHeight=plus.navigator.getStatusbarHeight();
		uni.getSystemInfo({
			success: data => {
				this.wrapperHeight = data.windowHeight-44;
				//#ifdef APP
				this.wrapperHeight = data.windowHeight - plus.navigator.getStatusbarHeight() - 44;
				//#endif
				this.loadingHeight = this.wrapperHeight - 150;
			}
		});
		this.getWindowMessage('0');
	},
	methods: {
		getRestaurantList(id) {
			if (this.isLocal) {
				this.list = [
					{
						id: '0',
						name: '汉中凉皮'
					},
					{
						id: '1',
						name: '南方甜食'
					}
				];
				return;
			}
			uni.showLoading({
				title: '加载中'
			});
			_ajax({
				isMock: true,
				url: `https://www.fastmock.site/mock/2c179a10bd6f56d8844d8cb2e3bb11a6/test/restaurant/${id}`,
				method: 'GET'
			}).then(res => {
				this.list = res.data.list;
				this.imgList = res.data.imgList;
				uni.hideLoading();
			});
		},
		getWindowMessage(id) {
			if (this.isLocal) {
				switch (id) {
					case '0':
						this.windowData = {
							title: '汉中凉皮',
							tel: 1100000000,
							list: [
								{
									id: 1,
									img: '',
									title: '纯瘦肉夹馍',
									price: 7,
									isLiked: true,
									likeNum: 12,
									token: null
								},
								{
									id: 2,
									img: '',
									title: '肥瘦肉夹馍',
									price: 6,
									isLiked: true,
									likeNum: 10,
									token: null
								},
								{
									id: 3,
									img: '',
									title: '孜然肉夹馍',
									price: 5,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 3,
									img: '',
									title: '花干鸡蛋',
									price: 4.5,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 3,
									img: '',
									title: '花干火腿',
									price: 4.5,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 3,
									img: '',
									title: '鸡蛋火腿',
									price: 4.5,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 4,
									img: '',
									title: '酱味米线',
									price: 8,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 5,
									img: '',
									title: '酸辣粉',
									price: 8,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 6,
									img: '',
									title: '热干面',
									price: 8,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 7,
									img: '',
									title: '菜夹馍',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 8,
									img: '',
									title: '豆皮夹馍',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 9,
									img: '',
									title: '花干夹馍',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 10,
									img: '',
									title: '火腿夹馍',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 11,
									img: '',
									title: '擀面皮',
									price: 5,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 12,
									img: '',
									title: '米皮',
									price: 5,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 13,
									img: '',
									title: '水晶皮',
									price: 5,
									isLiked: true,
									likeNum: 15,
									token: null
								}
							]
						};
						break;
					case '1':
						this.windowData = {
							title: '南方甜食',
							tel: 1100000000,
							list: [
								{
									id: 0,
									img: '',
									title: '莲子八宝粥',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '皮蛋瘦肉粥',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '胡辣汤',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '南瓜玉米粥',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '小米绿豆',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '原味豆浆',
									price: 2.5,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '五谷豆浆',
									price: 2.5,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '热牛奶',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '冰镇酸梅',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '冰镇橙汁',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '冰镇柠檬',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '冰镇绿豆沙',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '冰镇西瓜汁',
									price: 4,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '千里香混沌',
									price: 6,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '紫菜蛋花汤',
									price: 5,
									isLiked: true,
									likeNum: 15,
									token: null
								},
								{
									id: 1,
									img: '',
									title: '醪糟汤圆',
									price: 3,
									isLiked: true,
									likeNum: 15,
									token: null
								}
							]
						};
						break;
					default:
						break;
				}
				return;
			}
			uni.showLoading({
				title: '加载中'
			});
			_ajax({
				isMock: true,
				url: `https://www.fastmock.site/mock/2c179a10bd6f56d8844d8cb2e3bb11a6/test/restaurant/${this.restaturantId}/window/${id}`,
				method: 'GET'
			}).then(res => {
				uni.hideLoading();
				this.windowData = res.data;
			});
		},
		backHome() {
			uni.navigateBack();
		},
		showRestaurant() {
			this.isShowRestaurant = !this.isShowRestaurant;
		},
		chooseRestaurant(e) {
			this.restaturantId = e;
			this.getRestaurantList(this.restaturantId);
			this.isShowRestaurant = false;
		}
	},
	components: {
		SideList,
		uniNavBar,
		WindowContent
	}
};
</script>

<style scoped>
.wrapper {
	overflow: hidden;
	background-color: #f8f8f8;
	color: #333333;
}
.swiper-item {
	width: 100%;
	height: 100%;
}
.img {
	width: 100%;
	height: 100%;
}
.content {
	display: flex;
}
.wrapper-content {
	/* height: 100px; */
	overflow: hidden;
	/* height: px; */
	/* height: 1000rpx; */
}
.nav-bar-right {
	font-size: 30rpx;
}
.nav-an {
	overflow: hidden;
	height: 0;
	transition: height 0.8s;
	position: absolute;
	z-index: 2;
	right: 0;
}
.nav-an.show {
	height: 500rpx;
}
.nav-choose-restaurant {
	margin-right: 30rpx;
	background-color: #fff;
	border-top: 20rpx solid rgba(0, 0, 0, 0);
	background-clip: content-box;
}
.nav-choose-restaurant::before {
	content: '';
	position: absolute;
	margin: 0 calc(50% - 30rpx);
	top: -20rpx;
	border-bottom: 20rpx solid white;
	border-left: 20rpx solid transparent;
	border-right: 20rpx solid transparent;
	border-top: 20rpx solid transparent;
}
.nav-choose-restaurant-item {
	font-size: 30rpx;
	text-align: center;
	margin: 10rpx 0;
	padding: 10rpx;
	border-bottom: 1px solid #f8f8f8;
	color: #8b8b8b;
	font-size: 12px;
}
.nav-choose-restaurant-item.active {
	color: #f76b8a;
	font-weight: 500;
}
</style>
